<template>
  <div class="my-ue">
    <vueUeditorWrap v-model="content" ref="myTextEditor" @beforeInit="addCustomButtom" :config="config" />

    <uploadpic :file="fileList" :width="150" :height="150" :real_width="150" :real_height="150" :is_more="true" :is_show="false" ref="uppic"
        @send_pic="onSuccess"></uploadpic>

    <el-dialog :close-on-click-modal="false" title="上传视频" :append-to-body="true" :visible.sync="show_videl">
      <uploadVideo @send_url="rev_send_url" v-if="show_videl"></uploadVideo>
    </el-dialog>
  </div>
</template>

<script>
import vueUeditorWrap from "vue-ueditor-wrap";
import axios from "axios";
import uploadpic from "@/components/page/pic/up_pic";
import uploadVideo from "@/components/currency/uploadvideo";
export default {
  name: "my-ue",
  props: {
    value: {
      type: String
    },
    config: {
      type: Object,
      default: () => {
        return {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 490,
          // 初始容器宽度
          initialFrameWidth: "100%",
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          serverUrl: "",
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          UEDITOR_HOME_URL: "/UE/"
        };
      }
    },
    uploadUrl: {
      type: String,
      default: "/"
    },
    /*上传图片的file控件name*/
    fileName: {
      type: String,
      default: "file"
    },
    maxUploadSize: {
      type: Number,
      default: 1024 * 1024 * 500
    }
  },
  data () {
    return {
      fileList: [],
      content: "ss",
      config1: this.config,
      show_videl: false
    };
  },
  components: {
    vueUeditorWrap,
    uploadpic,
    uploadVideo
  },
  computed: {
    editor () {
      return this.$refs.myTextEditor.quill;
    }
  },
  created () { },
  mounted () {
    this.content = this.value;
  },
  watch: {
    value (newVal, oldVal) {
      if (this.editor) {
        if (newVal !== this.content) {
          this.content = newVal;
        }
      }
    },
    content (val) {
      this.$emit("input", val);
    }
  },
  methods: {
    rev_send_url (val) {
      let that = this;
      let html_src = `<video style="width:100%" controls="controls" poster="${val.video_pic}" id="${val.video_id}" src="${val.video_url}">1</video>`;
      this.$nextTick(() => {
        // this.$refs.myTextEditor.editor.execCommand("inserthtml", "<img />");
        this.$refs.myTextEditor.editor.execCommand("inserthtml", html_src);
      });
      that.show_videl = false;
    },
    onSuccess (pic) {
      let that = this;
      this.fileList = this.fileList.concat(pic);
      let html_src = "";
      this.fileList.forEach(src => {
        html_src =
          html_src +
          `<img data-src="${that.$fnc.getImgUrl(
            src.piclink
          )}" src='${that.$fnc.getImgUrl(src.piclink)}' />`;
      });
      this.$nextTick(() => {
        this.$refs.myTextEditor.editor.execCommand("inserthtml", html_src);
        this.fileList = [];
      });
    },
    addCustomButtom (editorId) {
      var that = this;
      window.UE.registerUI(
        "tk-button",
        function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () { }
          });
          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: "图库上传",
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: "background-size: auto;background-position: -380px 0px;",
            // 点击时执行的命令
            onclick: function () {
              that.$refs.uppic.up_show = true;
              that.$refs.uppic.get_cate();
            }
          });

          // 因为你是添加 button，所以需要返回这个 button
          return btn;
        },
        56 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );

      window.UE.registerUI(
        "pic-button",
        function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () { }
          });

          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: "图片上传",
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: "background-size: auto;background-position: -40px 80px;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              var input = document.createElement("input");
              input.type = "file";
              input.uploadAsync = false;
              input.multiple = "true";
              input.style.display = "none";
              document.body.appendChild(input);
              input.click();
              input.addEventListener("change", e => {
                // 利用 AJAX 上传，上传成功之后销毁 DOM
                var fileInput = e.target;
                if (fileInput.files.length === 0) {
                  return;
                }
                let requestlist = fileInput.files;
                function startapi () {
                  let counts = 0;
                  return function apirequest (item) {
                    let arg = arguments[0];
                    let a = new Promise((resove, reject) => {
                      var data = new FormData();
                      data.append(that.fileName, item);
                      data.append("folder", "new");
                      axios.post(that.uploadUrl, data).then(res => {
                        if (res.data.code == 200) {
                          editor.execCommand(
                            "inserthtml",
                            `<img data-src="${that.$fnc.getImgUrl(
                              res.data.result
                            )}" src='${that.$fnc.getImgUrl(
                              res.data.result
                            )}' />`
                          );
                          resove(res.data.result);
                          console.log(item);
                        } else {
                          reject();
                        }
                      });
                    });
                    a.then(() => {
                      counts++;
                      if (counts > requestlist.length) {
                        return;
                      }
                      apirequest(requestlist[counts]);
                    }).catch(err => {
                      if (counts > requestlist.length) {
                        return;
                      }
                    });
                  };
                }
                let newapiget = startapi();
                newapiget(requestlist[0]);
              });
            }
          });

          // 因为你是添加 button，所以需要返回这个 button
          return btn;
        },
        56 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );
      if (
        this.$store.state.plugin.yspdb &&
        this.$store.state.plugin.yspdb.is_open == 1
      ) {
        window.UE.registerUI(
          "shipin-button",
          function (editor, uiName) {
            // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
              execCommand: function () { }
            });

            // 创建一个 button
            var btn = new window.UE.ui.Button({
              // 按钮的名字
              name: uiName,
              // 提示
              title: "视频上传",
              // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
              cssRules:
                "background-size: auto;background-position: -320px 100px;",
              // 点击时执行的命令
              onclick: function () {
                that.show_videl = true;
              }
            });

            // 因为你是添加 button，所以需要返回这个 button
            return btn;
          },
          56 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
          editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
        );
      }
    }
  }
};
</script>
<style lang="less" scoped></style>
